<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
    <title>17.优化依赖项大小</title>
</head>

<body>
    <div>
        <h1>依赖优化</h1>
        <p>在应用程序中经常会依赖第三方包，但是我们不想引用包中的所有代码，我们只想用到哪些代码就包含哪些代码，此时可以使用插件对依赖项就行优化</p>
        <p>1 :下载依赖 react-app-rewired customize-cra </p>
        <p>1.1:react-app-rewired 覆盖 create-react-app 的默认配置</p>
        <p>1.2:customize-cra 导出一些辅助方法，可以让以上写法更加简洁</p>
        <p>2: 在项目的根目录下新建 config-overrides.js 并且加入配置代码</p>
        <div>
            const {override, useBabelRc} = require('customize-cra')
            实际上useBabelRc 返回了 (oldConfig) => newConfig 方法
            module.exports = override(useBabelRc())
        </div>
        <p>3: 修改package.json文件中的构建命令</p>
    </div>
</body>

<script>
    // 1.1
    // 参数中的 oldConfig 就是默认的 webpack config
    module.export = function (oldConfig) {
        return oldConfig
    }

    // 1.2
    const {
        override,
        useBabelRc
    } = require('customize-cra')

    // override 可以接收多个参数，每个参数都是一个配置函数，函数接收 oldConfig,返回 newConfig
    // useBabelRc 允许使用 .babelrc 文件进行 babel 配置
    module.exports = override(
        (oldConfig) => newConfig,
        (oldConfig) => newConfig
    )
</script>

</html>